<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="sign-in-dialog" v-if="dialogStore.isSignInDialogVisible">
                <div class="sign-in-dialog__mask"></div>
                <div class="sign-in-dialog__content">
                    <div class="sign-in-dialog__gold"></div>
                    <div class="sign-in-dialog__close" @click="onClose">
                        <img :src="`${_oss_}images/icon-close.svg`" />
                    </div>
                    <div class="sign-in-dialog__top">
                        <div class="sign-in-dialog__data">
                            <div class="data__text">签到成功</div>
                            <div class="data__days">
                                已连续签到{{ data.day }}天
                            </div>
                            <div class="data__score">
                                当前积分：{{ userStore.midNum.score_num }}
                            </div>
                        </div>
                    </div>

                    <div class="sign-in-dialog__bottom">
                        <div class="sign-in-list">
                            <div class="sign-in-item" :class="{ active: item <= data.day }" v-for="item in 7" :key="item">
                                <div class="sign-in-icon"></div>
                                <div class="sign-in-text">第{{ item }}天</div>
                            </div>
                        </div>

                        <div class="sign-in-tips">
                            <p>签到一次得10积分</p>
                            <p>连续签到7天可多得50积分</p>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { SignInInfo } from "~/api";

const dialogStore = useDialogStore();
const userStore = useUserStore();
const data = ref({});

watch(
    () => dialogStore.isSignInDialogVisible,
    (newVal) => {
        if (newVal) {
            GetInfo();
        }
    },
    {
        immediate: true,
    }
);

const onClose = () => {
    dialogStore.isSignInDialogVisible = false;
};

async function GetInfo() {
    const res = await SignInInfo();
    if (res.code == 200) {
        data.value = res.data;
    }
}
</script>
<style lang="scss" scoped>
.sign-in-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 462px;
        height: 540px;
        background-color: #fff;
        transform: translate(-50%, -50%);
        border-radius: 30px;
    }

    &__close {
        position: absolute;
        bottom: -80px;
        left: 50%;
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);
        cursor: pointer;

        img {
            width: 100%;
            height: 100%;
        }
    }

    &__top {
        height: 286px;
        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/sign-in/bg.png?x-oss-process=image/format,webp");
        background-size: 100% 100%;
    }

    &__gold {
        position: absolute;
        top: 0;
        left: 0;
        width: 108px;
        height: 55px;
        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/sign-in/gold.png?x-oss-process=image/format,webp");
        background-size: 100% 100%;
        transform: translateY(-50%);
    }

    &__data {
        padding-top: 64px;
        line-height: 1;

        .data__text {
            color: #fff;
            font-size: 44px;
            text-align: center;
        }

        .data__days {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 48px;
            color: #ff8d2e;
            background-color: #ffffff;
            border-radius: 24px;
            margin: 27px auto 0;
            font-size: 24px;
        }

        .data__score {
            color: #fff;
            font-size: 24px;
            text-align: center;
            margin-top: 14px;
        }

        .data__btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 44px;
            background-color: #ff8d2e;
            color: #fff;
            font-size: 24px;
            border-radius: 24px;
            margin: 0 auto;
            cursor: pointer;
        }
    }

    &__bottom {
        padding-top: 56px;

        .sign-in-list {
            display: flex;
            padding-left: 30px;

            .sign-in-item {
                margin-right: 21px;
                text-align: center;

                &.active {
                    .sign-in-icon {
                        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/sign-in/icon-select-active.png");
                    }

                    .sign-in-text {
                        color: #ff942f;
                    }
                }
            }

            .sign-in-icon {
                width: 40px;
                height: 40px;
                background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/sign-in/icon-select.png");
            }

            .sign-in-text {
                font-size: 14px;
                color: #ddd;
                margin-top: 5px;
            }
        }

        .sign-in-tips {
            padding-top: 46px;
            text-align: center;
            color: #999;
            line-height: 23px;
        }
    }
}
</style>
